<template>
    <h1>hello</h1>
    <p>{{name}}</p>
    <p v-text="name"></p>
    <p>{{getname}}</p>
    <p v-text="age"></p>
    <el-button @click="setname({dogname:'旺财'})">点击修改名字</el-button>
    <el-button type="primary" @click="tosetage(28)">两秒后修改</el-button>
</template>

<script>
import { mapState,mapGetters,mapMutations, mapActions } from "vuex";

export default{
  mounted(){
    //访问state里的值this.$store.state.xxx
    console.log(this.$store.state.name);
    console.log(this.$store.getters.getname);
  },
  data(){
    return{

    }
  },
  computed:{
    //从公共变量store里访问name
    // name(){
    //   return this.$store.state.name
    // },
    // age(){
    //   return this.$store.state.age
    // }

    ...mapState(['name','age']),
    ...mapGetters(['getname'])
  },
  methods:{
    // ChangeName(){
    //访问mutations里的方法用this.$store.commit('方法名',{xxx})
    //   this.$store.commit('setname',{dogname:"旺财"})
    // }
    ...mapMutations(['setname']),
    //异步修改年龄

    // changeage(param){
    //   //访问actions里的方法用this.$store.dispatch('方法名')
    //   //then是访问执行完成后触发
    //   this.$store.dispatch('tosetage',param).then(()=>{
    //     console.log("年龄修改成功了哦！")
    //   })
    // }

    //mapAction的方式
    ...mapActions(['tosetage'])
  }
}
</script>
<style lang="less" scoped>

</style>